<template>
  <div class="index">
    <img class="bgIndex" src="../assets/index.png" alt />
    <div class="centerContent">
      <Alert>神民配置</Alert>
      <CheckboxGroup v-model="gods">
        <Checkbox label="预言家" border></Checkbox>
        <Checkbox label="女巫" border></Checkbox>
        <Checkbox label="猎人" border></Checkbox>
        <Checkbox label="白痴" border></Checkbox>
        <!-- <Checkbox label="守卫" border></Checkbox> -->
      </CheckboxGroup>
      <!-- <Input v-model="name" placeholder="请输入别名..." style="width: 200px;margin:20px" /> -->
      <Alert>狼人配置</Alert>
      <CheckboxGroup v-model="wolfs">
        <Checkbox label="白狼王" border></Checkbox>
        <!-- <Checkbox label="狼王" border></Checkbox> -->
      </CheckboxGroup>
      <div style="overflow: hidden">
        <div class="labelText">普通狼人:</div>
        <InputNumber
          v-model="wolfsNormal"
          :min="0"
          :max="5"
          controls-outside
          style="width: 100px; float: right"
        ></InputNumber>
      </div>
      <Alert>村民配置</Alert>
      <div style="overflow: hidden">
        <div class="labelText">普通村民:</div>
        <InputNumber
          v-model="humenNormal"
          :min="0"
          :max="5"
          controls-outside
          style="width: 100px; float: right"
        ></InputNumber>
      </div>
      <!-- <Alert>技能配置</Alert>
      <div class="cellDiv">
        <div class="labelText">解药配置:</div>
        <Select v-model="save" style="width: 200px">
          <Option
            v-for="item in saveList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </div>
      <div class="cellDiv">
        <div class="labelText">毒药配置:</div>
        <Select v-model="poison" style="width: 200px">
          <Option
            v-for="item in poisonList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </div>
      <div class="cellDiv">
        <div class="labelText">守卫配置:</div>
        <Select v-model="guard" style="width: 200px">
          <Option
            v-for="item in guardList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </div>-->
      <Alert>时间配置</Alert>
      <div style="overflow: hidden">
        <div class="labelText">狼人时间:</div>
        <InputNumber
          v-model="wolfsTime"
          :min="0"
          :max="90"
          controls-outside
          style="width: 100px; float: right"
        ></InputNumber>
      </div>
      <div style="overflow: hidden">
        <div class="labelText">女巫时间:</div>
        <InputNumber
          v-model="witchTime"
          :min="0"
          :max="30"
          controls-outside
          style="width: 100px; float: right"
        ></InputNumber>
      </div>
      <div style="overflow: hidden">
        <div class="labelText">预言家时间:</div>
        <InputNumber
          v-model="checkTime"
          :min="0"
          :max="30"
          controls-outside
          style="width: 100px; float: right"
        ></InputNumber>
      </div>
      <Button type="primary" style="margin: 0 5px" @click="create">创建</Button>
      <Button style="margin: 0 5px" @click="back">返回</Button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gods: [],
      wolfs: [],
      wolfsNormal: 0,
      humenNormal: 0,
      save: 1,
      saveList: [
        {
          label: "不可自救",
          value: 0
        },
        {
          label: "可以自救",
          value: 1
        },
        {
          label: "仅第一夜自救",
          value: 2
        }
      ],
      poison: 0,
      poisonList: [
        {
          label: "不可与解药同夜使用",
          value: 0
        }
        // {
        //   label: "可与解药同夜使用",
        //   value: 1,
        // },
      ],
      guard: 0,
      guardList: [
        {
          label: "同守同救死亡",
          value: 0
        },
        {
          label: "同守同救不死亡",
          value: 1
        }
      ],
      wolfsTime: 20,
      witchTime: 15,
      checkTime: 15
    };
  },
  methods: {
    create() {
      let role = [];
      let tempRole = this.gods.concat(this.wolfs);
      tempRole.forEach(el => {
        if (el == "预言家") {
          role.push(1);
        }
        if (el == "女巫") {
          role.push(2);
        }
        if (el == "猎人") {
          role.push(3);
        }
        if (el == "白痴") {
          role.push(4);
        }
        if (el == "守卫") {
          role.push(5);
        }
        if (el == "白狼王") {
          role.push(21);
        }
        if (el == "狼王") {
          role.push(22);
        }
      });
      for (let i = 0; i < this.wolfsNormal; i++) {
        let temp = 30;
        role.push(temp + 1);
      }
      for (let i = 0; i < this.humenNormal; i++) {
        let temp = 10;
        role.push(temp + 1);
      }
      if (role.length > 0) {
        localStorage.creator = true;
        localStorage.hostId = 1;
        let hostSetting = {
          role: role,
          save: this.save,
          saveAndGuard: this.guard,
          medicine: this.poison,
          wolfsTime: this.wolfsTime,
          witchTime: this.witchTime,
          checkTime: this.witchTime
        };
        this.$axios
          .post("/langren/room", {
            role: role,
            save: this.save,
            saveAndGuard: this.guard,
            medicine: this.poison,
            wolfsTime: this.wolfsTime,
            witchTime: this.witchTime,
            checkTime: this.witchTime
          })
          .then(res => {
            if (res.data.code == 200) {
              localStorage.creator = true;
              localStorage.hostId = res.data.data.hostId;
              localStorage.hostSetting = JSON.stringify(hostSetting);
              this.$router.push("/host");
            } else {
              this.$Message.error("房间不存在，请重试");
            }
          })
          .catch(err => {
            console.log(err);
            this.$Message.error("服务器错误，请重试");
          });
      } else {
        this.$Message.error(`角色必选`);
      }
    },
    back() {
      this.$router.push("/choose");
    }
  }
};
</script>
<style scoped>
.index {
  position: relative;
  overflow: hidden;
}
.bgIndex {
  height: 100vh;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.centerContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* height: 600px; */
  width: 95%;
  max-width: 680px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  padding: 20px;
  overflow-y: scroll;
}
.cellDiv {
  float: left;
  margin-bottom: 5px;
  overflow: hidden;
}
.labelText {
  float: left;
  height: 34px;
  line-height: 34px;
}
.ivu-checkbox-group,
.ivu-input-number {
  margin-bottom: 5px;
}
.ivu-checkbox-group-item {
  margin-bottom: 5px;
}
.centerContent >>> .ivu-checkbox-inner {
  display: none !important;
}
.ivu-checkbox-wrapper-checked.ivu-checkbox-border {
  border-color: #2d8cf0;
  color: #2d8cf0;
}
</style>